<template>
  <el-container class="image-switcher">
    <el-header><Header :isSimMainWin="false" title="image_switcher" /></el-header>
    <el-main>
      <el-carousel
        ref="activeImage"
        :autoplay="false"
        indicator-position="none"
        :loop="false"
        arrow="never"
        class="carousel">
        <el-carousel-item
          v-for="(image, index) in usedImageArr"
          :key="index"
          class="_itme"
          @click="triggerSignal(image)">
          <div
            class="__image"
            :style="`background: url(${image.url}) no-repeat center center;background-size: contain;`" />
        </el-carousel-item>
      </el-carousel>
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeMount, computed } from "vue";
import Header from "@/components/Header.vue";
import { controller } from "@/engine/Controller";
import { ImageInfo } from "@/engine/types/ImageSwitcher";
import { InjectCarouselScope } from "element-plus/es/components/carousel/src/carousel";
import { Event, ipcRenderer } from "electron";
import { SimFrameToSubChannel, SimSubwinMsgToSimWin } from "@/engine/types/Win";

const usedImageArr = computed(() => {
  return controller.imageSwitcherService.switchImages.filter(image => {
    if (controller.imageSwitcherService.showEmpty) {
      return true;
    } else {
      return image.url;
    }
  });
});
const activeImage = ref<InjectCarouselScope>();

const triggerSignal = (image: ImageInfo) => {
  if (image.signal?.elementId) {
    controller.simApi.uiClickButton({
      elementId: image.signal.elementId,
      simulationSessionId: image.signal.simulationSessionId,
      contextId: image.signal.contextId,
    });
  }
};

onBeforeMount(async() => {
  await controller.imageSwitcherService.pageInit();
});

onMounted(() => {
  activeImage.value!.setActiveItem(1);
  ipcRenderer.on(SimFrameToSubChannel.ImageSwitcherSwitch, (event: Event, data: string) => {
    console.log("get data: ", data, usedImageArr.value);
    for (const [i, v] of usedImageArr.value.entries()) {
      if (v.statusId === data) {
        if (v.url) {
          activeImage.value!.setActiveItem(i);
        } else if (controller.imageSwitcherService.showEmpty) {
          activeImage.value!.setActiveItem(i);
        }
        break;
      }
    }
  });

  // end position
  controller.winService.simSubWinSendInfoToSimWin({ type: SimSubwinMsgToSimWin.SubMounted });
});
</script>
<style lang="scss" scoped>
.image-switcher {
  height: 100%;
}
.image-switcher > .el-header {
  --el-header-padding: 0px;
  --el-header-height: 28px;
}
.el-main {
  --el-main-padding: 1em;
  overflow: hidden;
}
.carousel {
  width: calc(100vw - 2em);
  height: calc(100vh - 4.4em);
  ._itme {
    width: calc(100vw - 2em);
    height: calc(100vh - 4.4em);
  }
  .__image {
    width: 100%;
    height: 100%;
  }
}
.el-carousel__item.is-animating {
  -webkit-transition: -webkit-transform .01s ease-in-out;
  transition: -webkit-transform .01s ease-in-out;
  transition: transform .01s ease-in-out;
  transition: transform .01s ease-in-out,-webkit-transform .01s ease-in-out;
}
</style>
